<script setup>
import wInput from '@/components/watch-input.vue' //input
import wButton from '@/components/watch-button.vue' //button
import { useUserStore } from '@/stores/userStore'
import { userLoginApi,getUserByIdApi } from '@/apis/user.js'
import { getOpenIdApi, userRegisterApi } from '@/apis/user.js'
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
const isRotate = ref(false)//是否加载旋转
const isFocus = ref(true) // 是否聚焦
const logoImg = ref('@/static/logo.png')
const userStore = useUserStore()

const userInfo = ref({
	phone: '', //电话
	password: '', //密码
	avatarUrl: '',
})

const loginParams = ref({
	"appid": "wxf3f4ec422cad1890",
	"secret": "db5fdb593615ddfff0d2e89474ea6a3d",
	"code": "",
	"grant_type": "authorization_code"
})

onLoad(async() => {
    loginParams.value.code = (await uni.login()).code
	const getOpenId = await getOpenIdApi(loginParams.value)
	const user = await getUserByIdApi({'userId':getOpenId.openid})
	if(user.code === 200){
	    userInfo.value.phone = user.data.phone
	    userInfo.value.avatarUrl = user.data.avatarUrl
	} else {
		uni.navigateTo({
			url: '/pages/login/register' 
		})
	}
})


const login = async () => {
	isRotate.value = true
	const res = await userLoginApi(userInfo.value)
	if (res.code === 200) {
		userStore.setUserInfo(res.data)
		uni.setStorageSync('token', res.token)
		isRotate.value = false
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
}
/*
	uni.showLoading({
		title: '登录中'
	});
	getLogin()
	.then(res => {
		//console.log(res)
		//简单验证下登录（不安全）
		if(_this.phone==res.data.username && _this.password==res.data.password){
			let userdata={
				"username":res.data.username,
				"nickname":res.data.nickname,
				"accesstoken":res.data.accesstoken,
			} //保存用户信息和accesstoken
			_this.$store.dispatch("setUserData",userdata); //存入状态
			try {
				uni.setStorageSync('setUserData', userdata); //存入缓存
			} catch (e) {
				// error
			}
			uni.showToast({
				icon: 'success',
				position: 'bottom',
				title: '登录成功'
			});
			uni.reLaunch({
				url: '../../../pages/index',
			});
		}else{
			_this.password=""
			uni.showToast({
				icon: 'error',
				position: 'bottom',
				title: '账号或密码错误，账号admin密码admin'
			});
		}
		uni.hideLoading();
	}).catch(err => {
		uni.hideLoading();
	})
	*/
const clearPhone = ()=>{
	userInfo.value.phone = ''
}
</script>

<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="userInfo.avatarUrl"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<div class="main-list">
					<uni-easyinput class="main-input" suffixIcon="clear" v-model="userInfo.phone" placeholder="请输入手机号码"
					@iconClick="clearPhone()"></uni-easyinput>
				</div>
				<div class="main-list">
					<uni-easyinput class="main-input" type="password" v-model="userInfo.password" placeholder="请输入密码"></uni-easyinput>
				</div>
			</view>
			<wButton class="wbutton" text="登 录" :rotate="isRotate" @click="login"></wButton>

			<!-- 其他登录 -->
			<view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" ></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github"></view>
				</view>
			</view>

			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">找回密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">注册账号</navigator>
			</view>
		</view>
	</view>
</template>

<style>
@import url("../../components/css/icon.css");
@import url("./css/main.css");

.main-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* height: 36rpx; */   /* Input 高度 */
		color: #333333;
		padding: 0rpx 32rpx;
		margin:32rpx 0;
	}
	.main-input{
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		/* line-height: 100rpx; */
		padding-right: 10rpx;
		margin-left: 20rpx;
	}
</style>
